<!--财务设置->期末结转-->
<template>
    <div class="content-wrapper a-base-container">
        <div class="business-big-box" style="margin:2px 8px;height:calc(100% - 10px)">
            <!-- <div class="btn-wrapper clearfix" style="margin-bottom:0px;">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :span="2">
                            <div class="btns" @click="templateEdit(1)">
                                <a-icon class="btns-icon" type="file-add" />
                                <div class="btns-text">新增</div>
                            </div>
                        </a-col>
                        <a-col :span="2">
                            <div class="btns" @click="refresh">
                                <a-icon class="btns-icon" type="sync" />
                                <div class="btns-text">刷新</div>
                            </div>
                        </a-col>
                    </a-col>
                </a-row>
            </div> -->
            <!--菜单-->
            <section class="content-temp-wrapper">
                <section class="content-menu-tree" :style="menuStyle">
                    <div class="tree-btn clearfix" :style="munuTreeStyle">
                        <a-button type="danger" size="small" @click="deleteType" ghost style="margin-right:10px;float:right">
                            <a-icon type="delete" />删除
                        </a-button>
                        <a-button type="primary" size="small" @click="editType" ghost style="margin-right:10px;float:right">
                            <a-icon type="edit" />修改
                        </a-button>
                        <a-button type="primary" size="small" @click="newType" ghost style="margin-right:10px;float:right">
                            <a-icon type="file-add" />新增
                        </a-button>
                    </div>
                    <!--收缩按钮-->
                    <div class="shrink-btn" @click="clickShrink">
                        <a-icon v-if="menuStyleStatus" class="" type="double-left" />
                        <a-icon v-else class="" type="double-right" />
                    </div>
                    <div class="menu-tree-box" :style="munuTreeStyle">
                        <a-tree style="padding-top:10px;" :tree-data="treeMenu" show-icon default-expand-all @select="onSelect" :selected-keys="selectedTreeKeys">

                        </a-tree>
                    </div>
                </section>
                <div class="model-card">
                    <div class="card-list" v-for="(item,index) in dataSource" :key="index">
                        <div class="card-center">
                            <div class="title">
                                <div class="title-item">{{item.code}}-{{item.name}}</div>
                                <div class="title-item" @click="templateEdit(item)">
                                    <a-icon type="form" />
                                </div>
                                <div class="title-item" @click="templateDelete(item)">
                                    <a-icon type="delete" />
                                </div>
                            </div>
                            <div style="padding:10px;height: 110px;overflow: auto;">
                                <div style="font-size:14px">借：</div>
                                <div style="margin-left:20px;" v-if="m.amountDirection == 1" v-for="m in item.orderDetailList"> {{m.accountingName}}</div>
                                <div style="font-size:14px;margin-left:18px">贷：</div>
                                <div style="margin-left:38px;" v-if="m.amountDirection == 2" v-for="m in item.orderDetailList"> {{m.accountingName}}</div>
                            </div>
                            <div class="card-btn" @click="generateCredentials(item.id)">
                                生成凭证
                            </div>
                        </div>
                    </div>
                    <div class="card-list">
                        <div class="card-center" style="cursor:pointer;text-align:center;" @click="templateEdit(1)">
                            <a-icon class="card-add" type="plus" />
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <!-- modal 弹窗  -->
        <add-credentials ref="add" :vtype="2" :typeId="selectedTreeRows.id" :nowId="nowId" @showEditFormula="showEditFormula" @getDataList="getDataList"></add-credentials>

        <edit-formula ref="formula" @formulaBack="formulaBack"></edit-formula>

        <a-modal title="凭证分类名称" :visible="visibleType" :width="300" @ok="addTypeSave" @cancel="()=>{visibleType = false}">
            <a-input v-model="typeName" placeholder="请填写凭证分类名称"></a-input>
        </a-modal>
    </div>
</template>
<script>

import { mapState } from "vuex";
import { pageList, getDefault } from "@/api/erp/category";
import { save, getList, detail, remove, addType, removeType, listType } from "@/api/finance/endCredentials";
import editFormula from "@/components/Finance/credentials/editFormula/editFormula";
import addCredentials from "@/components/Finance/credentials/add/add";

export default {
    components: {
        editFormula,
        addCredentials
    },
    data () {
        return {
            dataSource: [],//列表数据


            visible: false,
            top: 0,
            left: 0,

            radioGroup: null,
            selectedRowKeys: [],
            isRouterAlive: true,
            dataSourceNumber: 12,//默认行数
            thisClickId: null,
            thisClickIndex: null,

            nowId: null,
            treeMenu: [
                {
                    title: '规则凭证分类',
                    key: '0',
                    children: []
                }
            ],
            menuStyle: {},
            munuTreeStyle: {},
            selectedTreeKeys: [],
            selectedTreeRows: {},
            menuStyleStatus: true,

            visibleType: false,
            typeName: null
        }
    },
    activated () {
        this.getDataList();
        this.getTypeList();
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    methods: {
        refresh () {
            this.getDataList();
            this.getTypeList();
        },
        //获取凭证列表
        getDataList () {
            let requestData = {
                vType: 2,
                type: this.selectedTreeRows.id,
            }
            getList(requestData).then(response => {
                if (response.code === 200) {
                    let data = response.data.records;
                    if (data.length < 1) {
                        this.dataSource = [];
                    } else {
                        for (let i = 0; i < data.length; i++) {
                            delete data[i].createDate;
                            data[i].key = data[i].id;
                        }
                        this.dataSource = data;
                    }
                }
            }).catch(error => { });
        },
        templateEdit (data) {
            this.$refs.add.templateEdit(data, 1);
        },
        templateDelete (item) {
            //删除
            let that = this;
            this.$confirm(
                {
                    title: '提示',
                    content: <span>是否确认删除<span style="color:red">{item.name}</span>模板?</span>,
                    okText: '确定',
                    cancelText: '取消',
                    onOk () {
                        remove({ id: item.id }).then(res => {
                            if (res.code === 200) {
                                that.$message.success('删除成功');
                                that.getDataList();
                                that.nowId = null;
                            }
                        })
                    },
                    onCancel () {

                    },
                }
            )
        },
        showEditFormula (data) {
            this.$refs.formula.show(data.record, data.index);
        },
        formulaBack (backdata) {
            console.log(backdata);
            this.$refs.add.formulaBack(backdata);
        },
        generateCredentials (id) {
            //生成凭证
            localStorage.setItem("credentialsTemplate", JSON.stringify({ "id": id, "vtype": 2 }));
            setTimeout(() => {
                localStorage.removeItem("credentialsTemplate");//删除名称为“key”的信息。
            }, 1000);
            this.$router.push('/finance/accounting/credentials');
        },
        clickShrink () {
            setTimeout(() => {
                this.menuStyleStatus = !this.menuStyleStatus;
                if (this.menuStyleStatus) {
                    this.menuStyle = { 'flex': '0 0 250px', 'width': '250px', 'border-right': '1px solid #ccc' }
                    this.munuTreeStyle = { 'display': 'block' }
                } else {
                    this.menuStyle = { 'flex': '0 0 32px', 'width': '32px', 'border': 'none' }
                    this.munuTreeStyle = { 'display': 'none' }
                }
            }, 200)
        },
        onSelect (keys, rows) {
            console.log('树形菜单选中', keys, rows, rows.node.dataRef);
            if (rows.selected && keys.indexOf('-') == -1) {
                this.selectedTreeKeys = keys;
                this.selectedTreeRows = rows.node.dataRef;
            } else {
                this.selectedTreeKeys = [];
                this.selectedTreeRows = {};

            }
            this.getDataList()
        },
        newType () {
            this.visibleType = true;
            this.typeName = null;
            this.selectedTreeKeys = [];
            this.selectedTreeRows = {};
        },
        editType () {
            if (this.selectedTreeKeys.length != 1) {
                this.$message.warning('请选择要修改的分类');
                return;
            }
            this.visibleType = true;
            this.typeName = this.selectedTreeRows.name;
        },
        addTypeSave () {
            //保存凭证分类
            let requestData = {
                name: this.typeName,//分类名称
                id: this.selectedTreeRows.id,
                type: 2,//类型:1常用凭证2规则凭证
            }
            addType(requestData).then(res => {
                if (res.code === 200) {
                    if (this.selectedTreeRows.id) {
                        this.$message.success('修改分类成功');
                    } else {
                        this.$message.success('新增分类成功');
                    }
                    this.selectedTreeKeys = [];
                    this.selectedTreeRows = {};
                    this.typeName = null;
                    this.visibleType = false;
                    this.getTypeList();
                }
            })
        },
        getTypeList () {
            listType({ type: 2 }).then(res => {
                if (res.code === 200) {
                    if (res.data.length > 0) {
                        res.data.forEach(item => {
                            item.title = item.name;
                            item.key = item.id;
                        });
                    }
                    this.treeMenu[0].children = res.data;
                }
            })
        },
        deleteType () {
            if (this.selectedTreeKeys.length != 1) {
                this.$message.warning('请选择要删除的分类');
                return;
            }
            let _this = this;
            this.$confirm({
                title: "提示",
                content: (
                    <span>
                        是否确认删除 “{_this.selectedTreeRows.name}” 分类?
                    </span>
                ),
                onOk () {
                    removeType({ id: _this.selectedTreeKeys[0] }).then(res => {
                        if (res.code === 200) {
                            _this.$message.success('删除分类成功');
                            _this.selectedTreeKeys = [];
                            _this.selectedTreeRows = {};
                            _this.typeName = null;
                            _this.getTypeList();
                        }
                    })
                },
                onCancel () { },
            });
        }
    }
};
</script>
<style lang="less">
    @import '~@/style/setting/business.less';
    .content-temp-wrapper {
        height: 100%;
        display: flex;
        .content-menu-tree {
            position: relative;
            transition: all 0.2s;
            flex: 0 0 250px;
            padding: 10px 0px;
            height: 100%;
            border-right: 1px solid #ccc;
            .tree-btn {
                width: 100%;
                height: 32px;
                border-bottom: 1px solid #ccc;
            }
            .shrink-btn {
                position: absolute;
                right: 0;
                top: 50%;
                width: 32px;
                height: 40px;
                line-height: 35px;
                text-align: center;
                cursor: pointer;
                z-index: 888;
            }
            .menu-tree-box {
                height: calc(100% - 22px);
                overflow-y: auto;
            }
            .menu-btn-box {
                height: 33px;
                position: absolute;
                width: 100%;
                border-bottom: 1px solid #ccc;
                right: 0px;
                top: 0px;
                text-align: right;
            }
        }

        .model-card {
            margin: 0px;
            flex: 1;
            height: calc(100% - 10px);
            // height: calc(100% - 55px);
            min-width: 1000px;
            border-bottom: none;
            overflow-y: auto;
            margin: 10px;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            .card-list {
                flex: 0 0 25%;
                height: 230px;
                font-size: 12px;
                padding: 10px;
                box-sizing: border-box;
                .card-center {
                    position: relative;
                    border: 1px solid rgba(30, 159, 255, 0.8);
                    width: 100%;
                    height: 100%;
                    font-size: 14px;
                    .title {
                        display: flex;
                        height: 32px;
                        line-height: 32px;
                        text-align: center;
                        background: rgba(30, 159, 255, 0.8);
                        color: #ffffff;
                        .title-item:nth-child(1) {
                            flex: 0 0 70%;
                            text-align: left;
                            padding-left: 10px;
                            box-sizing: border-box;
                        }
                        .title-item:nth-child(2) {
                            flex: 0 0 15%;
                            cursor: pointer;
                        }
                        .title-item:nth-child(3) {
                            flex: 0 0 15%;
                            cursor: pointer;
                        }
                    }
                    .card-add {
                        margin-top: 68px;
                        font-size: 72px;
                        color: rgba(30, 159, 255, 0.8);
                    }
                    .card-btn {
                        position: absolute;
                        bottom: 10px;
                        width: 100px;
                        background: rgba(30, 159, 255, 0.8);
                        left: 50%;
                        margin-left: -50px;
                        text-align: center;
                        color: #ffffff;
                        cursor: pointer;
                        padding: 5px 0;
                    }
                }
            }
            .card-list:hover {
                .card-center {
                    border: 1px solid rgba(30, 159, 255, 1);
                }
                .title {
                    background: rgba(30, 159, 255, 1);
                }
                .card-btn {
                    background: rgba(30, 159, 255, 1);
                }
                .card-add {
                    color: rgba(30, 159, 255, 1);
                }
            }
        }
    }
</style>
 